<!-- 检查记录 -->
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { getCheckRecord } from '../../../api/index'
import BaseHeader from '../BaseHeader.vue';
import { useRouter } from 'vue-router';
import CheckOk from './checkok.vue'
import { addCheckLog } from '../../../api/index';
import { ElMessage } from 'element-plus';
import emitter from '../../../mitt';
import * as XLSX from 'xlsx'; 

onMounted(() => {
  onSubmit();
})
const show = ref(false)
// const showCheck = () => {
//   show.value = true
// }

let remarkId = ref('');

const confirm = () => {
  show.value = false;
  onSubmit();
}
const total = ref(0);
const router = useRouter();

const formItem = reactive({
  inspectUser: '',
  type: '',
})

// 当前筛选table数据
const tableData = reactive<any[]>([]);

// 当前页码
let current = ref(1);

// 当前每页条数
let size = ref(10);

const onSubmit = () => {
  const params = {
    ...formItem,
    current: current.value,
    size: size.value
  };
  getCheckRecord(params).then((res: any) => {
    let data = res?.data?.records as any[];
    total.value = res?.data?.total as number;
    tableData.splice(0, tableData.length, ...data);
  })
}

const handleSizeChange = (val: number) => {
  size.value = val;
  onSubmit();
}

const handleCurrentChange = (val: number) => {
  current.value = val;
  onSubmit();
}

const backHome = () =>{
  router.push('/check');
}

const backHomePage = () =>{
  router.push('/');
}

// 检查完毕
const formItemInspection = reactive({
    inspectUser: 'admin',
    type: '10',
    remark: ''
})
let onCheck = () => {
  // show.value = true;
  addCheckLog(formItemInspection).then((res:any) => {
        if(res.code === 200) {           
            ElMessage.success(res.msg);
            emitter.emit('checkOk', true);
        } else {
            ElMessage.error(res.msg);
        }
        
    })
}

const currentType = ref('10')

const onEditCheck = (row:any)=>{
  currentType.value = row.type;
  remarkId.value = row.inspectLogId;
  show.value = true;
}

const exportToExcel = ()=> {  
      const data = tableData.map(item => ({  
        '检查人': item.inspectUser,  
        '检查内容': item.publicationTime=='10'?'库存检查':
             item.publicationTime=='20'?'入库检查':
             item.publicationTime=='30'?'请领记录检查':
             item.publicationTime=='40'?'归还记录检查':'监控记录检查',
        '检查时间': item.createTime,     
       
      }));  
      const ws = XLSX.utils.json_to_sheet(data);  
      const wb = XLSX.utils.book_new();  
      XLSX.utils.book_append_sheet(wb, ws, '库存检查');  
      XLSX.writeFile(wb, '库存检查.xlsx');  
    } 

</script>

<template>
  <BaseHeader title="检查记录列表" />
  <div class="main-box">
    <el-form :inline="true" :model="formItem" class="demo-form-inline">
      <el-form-item label="检查人">
        <el-input v-model="formItem.inspectUser" placeholder="输入检查人" clearable style="width: 20vw;"/>
      </el-form-item>
      <el-form-item label="检查内容">
        <el-select v-model="formItem.type" placeholder="选择检查内容" clearable style="width: 20vw;">
          <el-option label="库存检查" value="10" />
          <el-option label="入库检查" value="20" />
          <el-option label="请领记录" value="30" />
          <el-option label="归还记录检查" value="40" />
          <el-option label="监控记录检查" value="50" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" circle @click="onSubmit" />
        <el-button type="primary" @click="onCheck">检查完毕</el-button>
        <el-button type="success" @click="exportToExcel">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%;height: 70vh;" class="my-custom-table">
      <el-table-column prop="inspectUser" label="检查人" width="180" />
      <el-table-column prop="publicationTime" label="检查内容" width="180">
        <template #default="{row}">
          <div>
            <span v-if="row.type =='10'">库存检查</span>
            <span v-if="row.type =='20'">入库检查</span>
            <span v-if="row.type =='30'">请领记录检查</span>
            <span v-if="row.type =='40'">归还记录检查</span>
            <span v-if="row.type =='50'">监控记录检查</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="检查时间" />
      <el-table-column prop="remark" label="检查意见" />
      <el-table-column prop="storageLocations" label="操作">
        <template #default="{row}">
          <el-button type="primary" @click="onEditCheck(row)">编辑检查意见</el-button>
        </template> 
      </el-table-column>
    </el-table>

    <div class="paginations">
      <el-pagination v-model:current-page="current" :page-size="size" :size="size" layout="total, prev, pager, next"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" background class="page"/>
      <el-button @click="backHome">返回</el-button>
      <el-button @click="backHomePage" type="primary">返回首页</el-button>
    </div>
    <CheckOk :centerDialogVisible="show" :remarkId="remarkId" :type="currentType" @confirm="confirm" @close="show=false"/>

  </div>
</template>

<style scoped lang="less">
  .main-box{
    box-sizing: border-box;
    padding: 5vh;
    /deep/ .el-form-item__label{
      color: rgb(119, 240, 244);
    }
  }

  .paginations{
    position: fixed;
    bottom: 5vh;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    .page {
      margin-right: 10px;
    }
  }
</style>
